<!DOCTYPE html>
<!-- 注册校验练习 -->
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			.red{
				color:red;
			}
			.green{
				color:green;
			}
		</style>
		
		<script type="text/javascript">
		function fn(){
			var reg = /^\w{6,10}$/;
			/* if(reg.test(i1.value)){
				s1.className="green";
			}else{
				s1.className="red";
			} */
			s1.className = reg.test(i1.value)?"green" : "red";//三目表达式
			s2.className = reg.test(i2.value)?"green" : "red";
			/* if(reg.test(i2.value)){
				s2.className="green";
			}else{
				s2.className="red";
			} */
		}
		</script>
	</head>
	<body>
		用户名：<input type="text" 
		placeholder="请输入用户名" id="i1">
		<span id="s1">6-10 位数字字母下划线组成</span><br>
		
		密码：<input type="password" 
		placeholder="请输入密码" id="i2">
		<span id="s2">6-10 位数字字母下划线组成</span><br>
		
		<input type="button" value="校验" onclick="fn()">
	</body>
</html>